<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-09 16:59:37
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2023-05-06 15:28:00
 * @FilePath: \jzjy\src\views\ProductCenter\productDetails.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container">
    <div class="home">
      <div class="turnClass">
        <div class="bookTitle">
          <h2>{{ title }}</h2>
          <div class="full" @click="outFullScreenBooks">
            <i class="el-icon-full-screen"></i>
            退出全屏
          </div>
        </div>
        <div id="flipbook">
          <div v-for="(item, index) in file_lists" :key="index">
            <img :src="item.file_url" alt="" />
            <span class="pageIndex" style="color: #333">
              {{ index + 1 }}
            </span>
            <!-- <img :src="item.file_url" alt="" /> -->
            <!-- {{ index + 1 }} -->
          </div>
        </div>
        <div class="changePage">
          <span class="previous" @click="previous"
            ><i class="el-icon-arrow-left"></i
          ></span>
          <span class="next" @click="next"
            ><i class="el-icon-arrow-right"></i
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import turn from "../../utils/turn.min.js";
import { bookdetail, userinfo, askbook } from "../../api/http";
export default {
  inject: ["reload"], //刷新页面
  data() {
    return {
      bookResId: 0, //图书详情id
      title: "", //图书标题
      file_lists: [],

      height: 970,
      width: 840,
    };
  },
  created() {
    console.log(this.$route.query);
    this.bookResId = this.$route.query.id;
    //获取图书详情
    bookdetail({
      md5key: localStorage.getItem("md5key"),
      id: this.bookResId,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "图书详情");
        const data = res.retRes;
        this.title = data.title;
        this.synopsis = data.synopsis;
        this.contents = data.contents;
        this.author = data.author;
        const file_lists = data.file_lists;
        this.file_lists = file_lists;
        console.log(this.file_lists);
      }
    });
  },
  mounted() {
    //执行turn.js
    setTimeout(() => {
      this.onTurn();
    }, 300);
    //获取窗口可视化高度
    console.log(
      document.documentElement.clientWidth,
      document.documentElement.clientHeight,
      "可视化宽度和高度"
    );
    this.width = document.documentElement.clientWidth;
    this.height = document.documentElement.clientHeight;
  },
  methods: {
    onTurn() {
      this.$nextTick(() => {
        $("#flipbook").turn({
          display: "double",
          autoCenter: false,
          height: this.height - 100 + "px",
          width: this.width - 400 + "px",
          gradients: true,
          pages: 10,
          page: 1,
        });
      });
    },
    //上一页
    previous() {
      $("#flipbook").turn("previous");
      console.log($("#flipbook").turn("page"), "当前页码");
      // console.log($("#flipbook").turn("pages"), "总页数");
    },
    //下一页
    next() {
      $("#flipbook").turn("next");
      // $("#flipbook").turn("center")
      console.log($("#flipbook").turn("page"), "当前页码");
      // console.log($("#flipbook").turn("pages"), "总页数");
    },
    //跳转到哪一页
    // $("#flipbook").turn("page",4)
    //退出全屏
    outFullScreenBooks(){
        this.$router.replace({
            name:"ProductDetails",
            query:{
                id:this.bookResId
            }
        })
    },
  },
};
</script>

<style lang="less" scoped>
body{
    overflow: hidden;
}
.home {
    overflow: hidden;
  .turnClass {
    margin: 0 auto;
    // width: 1140px;
    border: 5px solid #ececec;
    border-top: 0;
    border-bottom: 0;
    border-radius: 5px;
    .bookTitle {
      position: relative;
      height: 32px;
      background-color: #ececec;
      text-align: center;
      line-height: 32px;
      h2 {
        font-size: 14px;
        font-weight: normal;
      }
      .full {
        position: absolute;
        top: 0px;
        right: 30px;
        font-size: 14px;
        cursor: pointer;
        i {
          font-size: 18px;
        }
      }
      .full:hover {
        background: #ccc;
      }
    }
    #flipbook {
      // background-color: #e4e4e4;
      // background-image: url("https://static.idianjiao.com/upload/img/20220727/16589151790003887.jpg");
      // background-repeat: no-repeat;
      // background-attachment: fixed;
      // background-size: 420px 570px;
      // border: 1px solid #ccc;
      margin: 0 auto !important;
      img {
        width: 100%;
        height: 100%;
      }
      .pageIndex {
        position: absolute;
        bottom: 0px;
        left: 50%;
        font-weight: 900;
        z-index: 1000;
      }
    }
    .changePage {
      margin: 0 auto;
      width: 1140px;
      height: 42px;
      line-height: 38px;
      text-align: center;
      background-color: #ececec;
      // border: 1px solid #ccc;
      border-top: 0;
      span {
        display: inline-block;
        width: 86px;
        font-size: 24px;
        color: #666;
        border: 2px solid #ccc;
        cursor: pointer;
      }
      .previous {
        margin-right: 20px;
      }
    }
  }
}
</style>
